<script setup>

import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import {onMounted, reactive, ref} from "vue";
import {deleteApi, deleteBatchApi, excelApi, pageApi} from "../../../api/axios.js";
import {myPage} from "../../../request/index.js";
import {ElMessage} from "element-plus";
import router from "../../../router/index.js";

// 路径导航
const navItems = [
  {icon: 'Avatar', label: '用户管理'},
  {icon: 'Menu', label: '菜单列表'},
];

// 数据头
const headItems = [
  {type: 'ipt', span: 5, placeholder: '搜索菜单名', callback: pageByTitle},
];

//表格列
const columns = [
  {label: '菜单名称', prop: 'title'},
  // {label: '菜单路径', prop: 'url'},
  {label: '菜单图标', prop: 'icon', type: 'icon'},
  {label: '菜单描述', prop: 'info', type: 'card', tooltip: false},
]

const buttons = [
  {label: '下级菜单', icon: 'Menu', callback: toSubMenu},
]

/* ================= 跳转下级菜单页面 ================= */
function toSubMenu(row) {
  sessionStorage.setItem('pid', row['id']);
  sessionStorage.setItem(('menuTitle'), row['title']);
  router.push('/SubMenu');
}

// 表格数据 + 分页数据 + 菜单名称
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 10, total: 0, callback: page});
let menuTitle = ref();
let pid = ref(0);

async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {
  let config = {
    api: pageApi,
    args: {module: 'menu'},
    params: {pageNum: pageNum, pageSize: pageSize, pid: 0},
    records: records,
    pageInfo: pageInfo
  }

  // 若菜单名不为空，则使用菜单名作为分页条件
  if (menuTitle.value) {
    config['params']['title'] = menuTitle.value;
  }
  if(pid.value) {
    config['params']['pid'] = pid.value;
  }
  // 发送分页请求
  await myPage(config);
}

/* ================= 搜索菜单名 ================= */
function pageByTitle(val) {
  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || menuTitle.value) {
    menuTitle.value = val;
    page();
  }
}

/* ================= 删除成功回调 ================= */
function deleteSuccess() {
  ElMessage.success('删除成功！');
  page();
}

/* ================= 报表打印 ================= */
function downloadExcel() {
  excelApi('/menu/excel', '菜单报表');
}

/* ================= 加载函数 ================= */
onMounted(() => {
  page();
});

</script>

<template>
  <my-nav :items="navItems"/>
  <my-head :items="headItems"/>
  <my-table module="menu"
            insert-page="/MenuInsert"
            update-page="/MenuUpdate"
            :records="records"
            :columns="columns"
            :buttons="buttons"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="deleteSuccess"
            :excel-api="downloadExcel"
            :pageInfo="pageInfo"/>
</template>

<style scoped lang="scss">

</style>